<template>
  <div>
    <!-- 基本表单 -->
    <ep-advance-card title="基本表单" class="m-b-20" theme="theme-1">
      <ep-form class="w-50" style="margin: 0 auto" ref="form" :form="form" :rules="page_rules" name-width="150px">
        <ep-form-item label="radio-group" attr="radio2" required>
          <ep-radio-group v-model="form.radio2">
            <ep-radio :label="3">备选项</ep-radio>
            <ep-radio :label="6">备选项</ep-radio>
            <ep-radio :label="9">备选项</ep-radio>
          </ep-radio-group>
        </ep-form-item>
        <ep-form-item label="checkbox-group" attr="checkbox2" required>
          <ep-checkbox-group v-model="form.checkbox2">
            <ep-checkbox :key="1" :label="1">1</ep-checkbox>
            <ep-checkbox :key="2" :label="2">2</ep-checkbox>
          </ep-checkbox-group>
        </ep-form-item>
        <ep-form-item label="录入编号" attr="head014" count required>
          <ep-input v-model="form.head014" name="head014" :maxlength="30"></ep-input>
        </ep-form-item>
        <ep-form-item label="录入英文" attr="head001" count required>
          <ep-input v-model="form.head001" name="head014" :maxlength="30"></ep-input>
        </ep-form-item>
        <ep-form-item label="多选校验" attr="mutiSelect">
          <ep-muti-select v-model="form.mutiSelect" filterable>
            <ep-select-item index="1" label="国际赛事"></ep-select-item>
            <ep-select-item index="2" label="特殊进出口军工物资"></ep-select-item>
            <ep-select-item index="3" label="国际援助物资"></ep-select-item>
            <ep-select-item index="444a" label="国际会议"></ep-select-item>
            <ep-select-item index="5" label="直通放行"></ep-select-item>
            <ep-select-item index="6" label="外交礼遇"></ep-select-item>
            <ep-select-item index="7" label="转关"></ep-select-item>
          </ep-muti-select>
        </ep-form-item>
        <ep-form-item label="运输方式" attr="head00201">
          <ep-select :label="drop" v-model="form.head00201" name="head00201">
            <ep-select-item v-for="(item, index) in drop" :key="index" :index="item.key" :label="item.label"></ep-select-item>
          </ep-select>
        </ep-form-item>
        <ep-form-item label="发货人代码" attr="head039">
          <ep-date v-model="form.head039" name="head039"></ep-date>
        </ep-form-item>
        <ep-form-item label="报检日期" attr="head056">
          <ep-date-range v-model="form.head056" name="head056" type="dateTime"></ep-date-range>
        </ep-form-item>
        <ep-form-item label="预计到达时间" attr="head065">
          <ep-date v-model="form.head065" name="head065" type="dateTime"></ep-date>
        </ep-form-item>
        <ep-form-item label="数字校验" attr="testNumber">
          <ep-input v-model.number="form.testNumber" name="testNumber"></ep-input>
        </ep-form-item>
        <ep-form-item label="备注" attr="head049" count :rule="{ required: true, message: '请输入备注', trigger: 'blur' }">
          <ep-input v-model="form.head049" name="head049" type="textarea" :maxlength="205"></ep-input>
        </ep-form-item>
        <ep-form-item>
          <ep-button type="primary" @click="commit('form')">提交</ep-button>
          <ep-button type="warning" @click="resetForm('form')">重置</ep-button>
        </ep-form-item>
      </ep-form>
    </ep-advance-card>

    <!-- 步骤条表单 -->
    <ep-advance-card title="步骤条表单" class="m-b-20" theme="theme-1">
      <div class="w-50" style="margin: 0 auto">
        <ep-steps :active="activeStep" finish-status="success">
          <ep-step title="填写信息1"></ep-step>
          <ep-step title="填写信息2"></ep-step>
          <ep-step title="完成"></ep-step>
        </ep-steps>
        <ep-form class="m-t-20 w-80" ref="form2" :form="form2" name-width="100px">
          <template v-if="activeStep == 0">
            <ep-form-item label="姓名" attr="name" :rule="{ required: true, message: '请输入', trigger: 'change' }" :maxlength="30">
              <ep-input v-model="form2.name"></ep-input>
            </ep-form-item>
            <ep-form-item label="住址" attr="addr" :rule="{ required: true, message: '请输入', trigger: 'change' }">
              <ep-input v-model="form2.addr" :maxlength="30"></ep-input>
            </ep-form-item>
            <ep-form-item>
              <ep-button type="primary" @click="nextStep">下一步</ep-button>
            </ep-form-item>
          </template>
          <template v-if="activeStep == 1">
            <ep-form-item label="户口类型" attr="type" :rule="{ required: true, message: '请输入', trigger: 'change' }" :maxlength="30">
              <ep-select v-model.number="form2.type" name="type">
                <ep-select-item :index="1" label="城市"></ep-select-item>
                <ep-select-item :index="2" label="农村"></ep-select-item>
              </ep-select>
            </ep-form-item>
            <ep-form-item label="请假日期" attr="date" :rule="{ required: true, message: '请选择', trigger: 'change' }">
              <ep-date-range v-model="form2.date" name="date" type="dateTime"></ep-date-range>
            </ep-form-item>
            <ep-form-item>
              <ep-button type="primary" @click="nextStep">提交</ep-button>
              <ep-button :plain="true" type="primary" @click="prevStep">上一步</ep-button>
            </ep-form-item>
          </template>
          <template v-if="activeStep == 2">
            <div class="text-center">
              <i class="ion-checkmark-circled fontSize-40" style="color: #27ae60"></i>
              <p class="fontSize-20 p-t-10 p-b-20">提交成功</p>
              <span class="fontSize-14 p-t-10 p-b-60">补充信息补充信息</span>
            </div>
          </template>
        </ep-form>
      </div>
    </ep-advance-card>

    <!-- 展示表单 -->
    <ep-advance-card title="展示表单" class="m-b-20" theme="theme-1">
      <ep-form ref="form3" name-width="100px" name-position="right">
        <ep-row>
          <ep-col :col="5">
            <ep-form-item label="测试表单1">
              <span>{{ form3.test1 }}</span>
            </ep-form-item>
          </ep-col>
          <ep-col :col="5">
            <ep-form-item label="测试表单1">
              <span>{{ form3.test1 }}</span>
            </ep-form-item>
          </ep-col>
          <ep-col :col="5">
            <ep-form-item label="测试表单1">
              <span>{{ form3.test1 }}</span>
            </ep-form-item>
          </ep-col>
          <ep-col :col="5">
            <ep-form-item label="测试表单1">
              <span>{{ form3.test1 }}</span>
            </ep-form-item>
          </ep-col>
          <ep-col :col="5">
            <ep-form-item label="测试表单1">
              <span>{{ form3.test1 }}</span>
            </ep-form-item>
          </ep-col>
        </ep-row>
      </ep-form>
    </ep-advance-card>
  </div>
</template>
<script>
export default {
  name: 'form-demo',
  data() {
    var test = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      } else {
        if (value.substring(0, 3) === 'EDI') {
          callback('不能为EDI开头')
        }
        callback()
      }
    }
    return {
      drop: [
        { key: '0', label: '非保税区' },
        { key: '1', label: '监管仓库' },
        { key: '2', label: '水路运输' },
        { key: '3', label: '铁路运输' },
        { key: '4', label: '公路运输' },
        { key: '5', label: '航空运输' },
        { key: '6', label: '邮件运输' },
        { key: '7', label: '保税区' }
      ],
      form: {
        radio2: '',
        checkbox2: [],
        head001: '',
        head014: '',
        head00201: '',
        head039: '',
        head049: '',
        head056: '',
        head065: '',
        head107: true,
        testNumber: '',
        mutiSelect: ''
      },
      page_rules: {
        radio1: { required: true, message: '请选择', trigger: 'change' },
        checkbox1: { required: true, message: '请选择', trigger: 'change' },
        radio2: { required: true, message: '请选择', trigger: 'change' },
        checkbox2: { required: true, message: '请选择', trigger: 'change' },
        head014: { validator: test, trigger: 'change, blur' },

        testNumber: [
          { required: true, message: '请输入', trigger: 'change' },
          { type: 'number', message: '数字', trigger: 'change' }
        ],
        head049: {
          min: 0,
          max: 200,
          message: '长度在 0 到 200 个字符（这个rule不会生效，因为head049 form-item 上配置了rule）',
          trigger: 'blur'
        },
        head056: { required: true, message: '请选择', trigger: 'change' },
        head065: { required: true, message: '请选择', trigger: 'change' },
        head001: {
          required: true,
          pattern: /^[a-z]+$/i,
          message: '只能输入英文',
          trigger: 'change'
        },
        mutiSelect: { required: true, message: '请选择', trigger: 'change' }
      },
      activeStep: 0,

      form2: {
        name: '',
        addr: '',
        type: '',
        date: ''
      },
      form3: {
        test1: '7029_1.1_1_17029_1'
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].reset()
    },
    commit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$pop({
            type: 'success',
            message: '验证通过！'
          })
        } else {
          this.$pop({
            type: 'warning',
            message: '验证失败！'
          })
        }
      })
    },

    nextStep() {
      this.$refs.form2.validate(valid => {
        if (valid) {
          console.log(valid, '下一步')
          this.activeStep++
        }
      })
    },
    prevStep() {
      this.activeStep--
    }
  }
}
</script>
